<template>
  <div class="recommendPage">
        <div id="emotion_chart" ref="emotion_chart"></div>
          <div class="dit_chart" ref="dit_chart"></div>
        <div id="line_chart" ref="line_chart"></div>
          <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
        <div id="pieChart" ref="pieChart"></div>
          
  </div>
</template>

<script>
// 引入插件

export default {
  components: {
   
  },
  data() {
    return {
      chart: {
        aa: 66666
      },
      //数据列表
      lineOptionxx:{
        title: {
          text: "次",
          textStyle: {
            fontSize: 14,
            fontWeight: "400"
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["衬衫x","羊毛衫x","雪纺衫x","裤子x","高跟鞋","袜子"]

        },

        yAxis: {
          type: "value",
          minInterval: 1
        },
        series: [
          {
            data: [5, 20, 36, 10, 10, 20],
            type: "line",
            areaStyle: {
              normal: {
                color: "#94CCE7" //改变区域颜色
              }
            },
            //折线
            itemStyle: {
              normal: {
                color: "#94CCE7" //折线点颜色
              },
              lineStyle: {
                color: "#94CCE7" //折线颜色
              }
            },
            showSymbol: false //去掉拐点
          }
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "92%",
          height: "76%",
          containLabel: true
        }
      },
      lineOption: {
       
        title: {
          text: "(单位) 次",
          textStyle: {
            fontSize: 14,
            fontWeight: "400"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{c}次",
          backgroundColor: "#7C7D7F", //提示框背景颜色
          textStyle: {
            fontSize: "16px",
            color: "#F0F0F1" // 设置文本颜色 默认#FFF
          }
        },
        xAxis: {
          type: "category",
          data: ["衬衫x","羊毛衫x","雪纺衫x","裤子x","高跟鞋","袜子"]
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          minInterval: 1
        },
        series: [
          {
            data: [5, 20, 36, 10, 10, 20],
            type: "bar",
            showBackground: true,
            barWidth: 20,
            backgroundStyle: {
              color: 'transparent'
            },
            itemStyle: {
              emphasis: {
                  barBorderRadius: 5
              },
              normal: {
                barBorderRadius:[5, 5, 0, 0],
                color: "#67C1EF"
              }
            }
          }
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "92%",
          height: "80%",
          containLabel: true
        }
      },
      //柱状图OP
      barOption: {
        title: {
          text: "(单位) 次",
          textStyle: {
            fontSize: 14,
            fontWeight: "400"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{c}次",
          backgroundColor: "#7C7D7F", //提示框背景颜色
          textStyle: {
            fontSize: "16px",
            color: "#F0F0F1" // 设置文本颜色 默认#FFF
          }
        },
        xAxis: {
          type: "category",
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          minInterval: 1
        },
        series: [
          {
            data: [5, 20, 36, 10, 10, 20],
            type: "bar",
            showBackground: true,
            barWidth: 20,
            backgroundStyle: {
              color: "transparent"
            },
            itemStyle: {
             emphasis: {
                  barBorderRadius: 5
              },
              normal: {
                barBorderRadius:[5, 5, 0, 0],
                color: "#FBB667"
              }
            }
          }
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "92%",
          height: "80%",
          containLabel: true
        }
      },
      //饼图OP
      pieOption: {
        tooltip: {
          trigger: "item",
          formatter: "{b}</br> {d}%",
          backgroundColor: "#7C7D7F", //提示框背景颜色
          textStyle: {
            fontSize: "16px",
            color: "#F0F0F1" // 设置文本颜色 默认#FFF
          }
        },

        graphic: [
        //   {
        //     type: "text",
        //     left: "center",
        //     top: "100",

        //     style: {
        //       text: "记录时长",
        //       textAlign: "center",
        //       fill: "#999",
        //       fontSize: 20
        //     }
        //   },
          {
            type: "text",
            left: "center",
            top: "130",

            style: {
              text: "",
              textAlign: "center",
              fill: "#000",
              fontSize: 24
            }
          },
        //   {
        //     type: "text",
        //     left: "center",
        //     top: "170",

        //     style: {
        //       text: "行为记录",
        //       textAlign: "center",
        //       fill: "#999",
        //       fontSize: 20
        //     }
        //   },
          {
            type: "text",
            left: "center",
            top: "200",

            style: {
              text: "",
              textAlign: "center",
              fill: "#000",
              fontSize: 24,
              fontweight: "900"
            }
          }
        ], //图形中间文字

        legend: [
          //修改 legend 的位置
          {
            bottom: 20,
            data: ["睡眠情况", "日常活动"]
          },
          {
            bottom: 0,
            data: ["情绪变化", "饮食用药"]
          }
        ],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#fff",
              emphasis: {
                label: {
                  show: false,
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 5,
                name: "日常活动",
                itemStyle: { normal: { color: "#E77C83" } }
              },
              {
                value: 6,
                name: "饮食用药",
                itemStyle: { normal: { color: "#EB9244" } }
              },
              {
                value: 7,
                name: "情绪变化",
                itemStyle: { normal: { color: "#5B9D3D" } }
              },
              {
                value: 8,
                name: "睡眠情况",
                itemStyle: { normal: { color: "#189EFF" } }
              }

              // itemStyle:{normal:{color:"#189EFF"}}// #E77C83 #EB9244 #5B9D3D
            ]
          }
        ],
        color: ["#189EFF", "#E77C83", "#5B9D3D", "#EB9244"]
      },
    };
  },
  methods: {
      //折线
    lineChart() {
      // let myChart = this.$echarts.init(document.getElementById('emotion_chart'))
      // console.log(myChart)
      let myChart = this.$echarts.init(
        document.getElementById("emotion_chart")
      );

      myChart.setOption(this.lineOption);
      // myChart.setOption(this.barOption);
    },
    //饼图
    pieChart() {
      let myChart = this.$echarts.init(this.$refs.pieChart);

      myChart.setOption(this.pieOption);
    },
    //柱状图
    barChart() {
      let myChart = this.$echarts.init(this.$refs.dit_chart);

      myChart.setOption(this.barOption);
    },
    lineChartxx() {
      let myChart = this.$echarts.init(this.$refs.line_chart);

      myChart.setOption(this.lineOptionxx);
    },
     drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  },
  computed: {
   
  },
   created() {
  },
  mounted() {
    this.lineChart();
    this.pieChart();
    this.barChart();
    this.lineChartxx();
    this.drawLine();
  }
};
</script>
<style scoped >
#emotion_chart {
  height: 150px;
  width: 600px;
}
.dit_chart {
  height: 150px;
  width: 600px;
}
#line_chart {
  height: 150px;
  width: 600px;
}
#pieChart{
     height: 300px;
  width: 600px; 
}
</style>